import {messages} from "share/common";
import React from 'react'
import {connect} from 'react-redux'
import { setBillingType } from 'actions/billing'
import menuRoute from 'routes/menuRoute'
import 'styles/setting/wait-for-billing/wait-for-billing.scss'
import SlideFrame from 'components/slide-frame';
import jdImg from 'images/wait-for-billing/jd.png'
import zxImg from 'images/wait-for-billing/zx.png'
import didiImg from 'images/wait-for-billing/didi.png'
import didiBgImg from 'images/wait-for-billing/didi-bg.png'
import szImg from 'images/wait-for-billing/sz.png'
import szBgImg from 'images/wait-for-billing/sz-bg.png'
import zxBgImg from 'images/wait-for-billing/zx-bg.png'
import jdBgImg from 'images/wait-for-billing/jd-bg.png'
import {Row, Col} from 'antd'
import DefaultTicket from "containers/financial-management/wait-for-billing/default-ticket"

class WaitForBilling extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imgStyles: [
        {
          id: 'DIDI',
          style: {backgroundImage: `url('${didiBgImg}')`},
          src: didiImg,
          name: messages('financial-management.key539'/*滴滴开票*/),
          skipToList: 'DIDI'
        },
        // {
        //   id: 'CLOUD_HELIOS_HOTEL',
        //   style: {backgroundImage: `url('${zxBgImg}')`},
        //   src: zxImg,
        //   name: messages('financial-management.key540'/*甄选酒店开票*/),
        //   skipToList: 'CLOUD_HELIOS_HOTEL'
        // },
        // {
        //   id: 'SHEN_ZHOU',
        //   style: {backgroundImage: `url('${szBgImg}')`},
        //   src: szImg,
        //   name: messages('financial-management.key541'/*神州开票*/),
        //   skipToList: 'SHEN_ZHOU'
        // },
        {
          id: 'jd',
          style: {backgroundImage: `url('${jdBgImg}')`},
          src: jdImg,
          name: messages('financial-management.key542'/*京东开票*/),
          skipToList: 'jd'
        }
      ],
      showSlideFrame: false,
      vendor: '',
      title: ''
    };
  }

  skipToList = key => {
    if (key === 'jd') {
      this.context.router.push(menuRoute.getRouteItem(`wait-for-billing-${key}`).url);
    }
    else {
      this.props.dispatch(setBillingType(key));
      this.context.router.push(menuRoute.getRouteItem(`wait-for-billing-list`).url.replace(':billingType', key));
    }
  };

  createObj = (values, isShow) => {
    let itemObj = {};
    const {imgStyles} = this.state;
    itemObj.divClassName = `billing-background`;
    itemObj.show = isShow;
    imgStyles.map(item => {
      item.id === values && (itemObj = Object.assign(itemObj,item));
    });
    return itemObj;
  };

  renderItem = () => {
    let cardItems = [];
    let didi = this.createObj('DIDI', true);//滴滴开票
    let jd = this.createObj('jd', this.props.profile['finance.jingdong.receipt.invoice.show']);//京东开票
    let zx = this.createObj('CLOUD_HELIOS_HOTEL', true);//甄选酒店
    let sz = this.createObj('SHEN_ZHOU', true);//神州开票
    cardItems.push(didi);
    return (
      <div className='billing-platform'>
        <Row gutter={24} style={{width: '100%'}}>
          {
            cardItems.map(items => {
              let card = null;
              items.show ? (card =
                <Col span={8} onClick={() => {
                  this.skipToList(items.skipToList)
                }}  style={{cursor: 'pointer'}}>
                  <div className={items.divClassName} style={items.style}>
                    <div><img src={items.src}/>
                      <div className='billing-title'>{items.name}</div>
                      {
                        items.id !== 'jd' && (
                          <a style={{ fontSize: '16px', marginTop: '12px' }}
                             onClick={e => this.handleDefaultTicket(e, items)}>{messages('financial-management.key922')/*设置默认开票类型*/}</a>
                        )
                      }
                    </div>
                  </div>
                </Col>) : card = null;
              return card;
            })
          }
        </Row>
      </div>
    )
  };

  handleDefaultTicket = (e, item) => {
    e.stopPropagation();
    this.setState({ vendor: item.id, title: item.name },() => {
      this.setState({ showSlideFrame: true })
    })
  };

  render() {
    const { showSlideFrame, vendor ,title } = this.state;
    return (
      <div className="wait-for-billing">
        {this.renderItem()}
        <SlideFrame
          show={showSlideFrame}
          title={title}
          params={{
            showSlideFrame,
            vendor
          }}
          content={DefaultTicket}
          onClose={() => this.setState({showSlideFrame: false})}
          afterClose={() => this.setState({showSlideFrame: false})}
        />
      </div>
    )
  }

}

WaitForBilling.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile
  }
}

export default connect(mapStateToProps)(WaitForBilling);
